<template>
  <van-skeleton title avatar :row="3" :loading="loading1">
    <div>
      <div class="cart">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-card
              v-for="item in list"
              :key="item.id"
              :price="item.price"
              :title="item.title"
            >
              <template #thumb>
                <div class="checkbox-img">
                  <van-checkbox v-model="item.checked"></van-checkbox>
                  <img :src="item.img" alt="" />
                </div>
              </template>
              <template #footer>
                <van-stepper v-model="item.num" />
              </template>
            </van-card>
          </van-list>
        </van-pull-refresh>
      </div>
      <van-submit-bar :price="zprice*100" button-text="去结算" @submit="onSubmit">
        <van-checkbox v-model="allchecked">全选</van-checkbox>
      </van-submit-bar>

      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
        <van-tabbar-item icon="friends-o">我的淘宝</van-tabbar-item>
      </van-tabbar>
    </div>
  </van-skeleton>
</template>
<script setup>
import { computed, ref, onMounted } from "vue";
import axios from "axios";
import math from '@/utils/index'

const active = ref(1);
const list = ref([]);

// 3.实现购物车商品列表下拉刷新
// 4.实现购物车商品列表下拉刷新，接口同步修改处理成分页
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }

    axios.get("/getlist").then((res) => {
      //   console.log(res);
      list.value = list.value.concat(res.data.list);
    });
    loading.value = false;

    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 300);
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};
// 7.正确实现全选全不选商品
const allchecked = computed({
  get() {
    return list.value.every((item) => item.checked);
  },
  set(val) {
    list.value.forEach((item) => (item.checked = val));
  },
});
// 6.进入购物车页面加载数据过程中展示骨架屏
const loading1 = ref(true);
onMounted(() => {
  setTimeout(() => {
    loading1.value = false;
  }, 1000);
});
// 8.封装函数处理js中如0.1+0.2!==0.3的问题
// 9.使用计算属性处理全选反选时总价计算正确
const zprice = computed(()=>{
    let zprice = 0
    let checkbox = list.value.filter(item=>item.checked)
    checkbox.forEach(item=>{
        zprice += item.price * item.num
    })
    return zprice
})
</script>
<style scoped lang='scss'>
.van-submit-bar {
  margin-bottom: 50px;
}
.cart {
  margin-bottom: 100px;
}
.checkbox-img {
  width: 110px;
  display: flex;
  img {
    width: 80px;
    height: 80px;
  }
}
:deep(.van-card__content) {
  margin-left: 20px;
}
</style>